<!--
    自适应, 宽100%，高133px
-->
<template>
    <div class="calendar-body">
        <div class="time-panel">
            <p class="week">{{week}}</p>
            <p class="time">{{time}}</p>
            <p class="date">{{date}}</p>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                week: this.getWeek(),
                time: this.getTime(),
                date: this.getDate()
            }
        },
        methods: {
            setDate: function () {
                var _this = this;   // 注意 "this" 的生命周期，以及作用域
                window.setInterval(function () {
                    var now = new Date();
                    _this.week = _this.getWeek();
                    _this.time = _this.getTime();
                    _this.date = _this.getDate();
                }, 1000);
            },
            getWeek: function () {
                var str = "";
                var week = new Date().getDay();
                if (week == 0) {
                    str = "星期日";
                } else if (week == 1) {
                    str = "星期一";
                } else if (week == 2) {
                    str = "星期二";
                } else if (week == 3) {
                    str = "星期三";
                } else if (week == 4) {
                    str = "星期四";
                } else if (week == 5) {
                    str = "星期五";
                } else if (week == 6) {
                    str = "星期六";
                }
                return str;
            },
            getTime: function () {
                var now = new Date();
                var hours = now.getHours();
                var sec = now.getSeconds();
                var minu = now.getMinutes();
                if( hours < 10 ) hours = 0+''+hours;
                if( sec < 10 ) sec = 0+''+sec;
                if( minu < 10 ) minu = 0+''+minu;
                return hours+":"+minu+":"+sec;
            },
            getDate: function () {
                var now = new Date();
                return now.getUTCFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
            }
        },
        ready: function () {
            this.setDate();
        }
    }
</script>

<style>
    .calendar-body {
        width: 100%;
        height: 100%;
    }

    .calendar-body .time-panel {
        color: #FFFFFF;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
        background-color: #409040;
        border-width: 0px 1px 0px 1px;
        border-color: #6699CC;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .calendar-body .week {
        font-size: 15px;
    }

    .calendar-body .time {
        font-size: 32px;
    }

    .calendar-body .date {
        font-size: 18px;
    }

</style>